⚡ 30 秒速记

• 普通钩子靠调用位置对应内部状态
• 首次建立记录，更新时按顺序读取
• 提交更新不修改当前闭包里的值
• 自定义钩子也遵守同样的调用规则
• use 的专门规则不能套给其他钩子

普通钩子的状态不是靠变量名找到的，而是靠这次渲染走到第几个调用位置。 首次执行建立状态记录，后续按相同顺序读取并处理更新。如果某次跳过中间一个调用，后面的对应关系就会出错，所以条件要放在钩子内部逻辑，而不是包住普通钩子本身。内部链表是理解实现的线索，业务代码遵守公开规则即可，不依赖具体源码字段。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

React 团队面向开发者给出了两条 React-Hooks 的使用原则，原则的内容如下：

• 只在 React 函数中调用 Hook；
• 不要在循环、条件或嵌套函数中调用 Hook。

从现象看问题：若不保证 Hooks 执行顺序，会带来什么麻烦

先来看一个小 Demo：

import React, { useState } from "react";

function PersonalInfoComponent() {
  // 集中定义变量
  let name, age, career, setName, setCareer;

  // 获取姓名状态
  [name, setName] = useState("修言");

  // 获取年龄状态
  [age] = useState("99");

  // 获取职业状态
  [career, setCareer] = useState("我是一个前端，爱吃小熊饼干");

  // 输出职业信息
  console.log("career", career);

  // 编写 UI 逻辑
  return (
    <div className="personalInfo">
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
      <p>职业：{career}</p>
      <button
        onClick={() => {
          setName("秀妍");
        }}
      >
        修改姓名
      </button>
    </div>
  );
}

export default PersonalInfoComponent;

这个 PersonalInfoComponent 组件渲染出来的界面长这样：

PersonalInfoComponent 用于对个人信息进行展示，这里展示的内容包括姓名、年龄、职业。出于测试效果需要，PersonalInfoComponent 还允许你点击“修改姓名”按钮修改姓名信息。点击一次后，“修言”会被修改为“秀妍”，如下图所示：